import { type ProColumns, type ProCoreActionType } from '@ant-design/pro-components';
import React, { ReactNode } from 'react';
import { createForm } from '@formily/core';
import { useProTable } from '@/uses/useProTable';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import {useDrawerForm} from '@/uses/useForm';
import { createRequest } from '@/uses/useCurdPage';

export default () => {
  const form = createForm()

  type DetailInfo = {
    id: string;
    name: string;
    imgUrl: string;
    createdBy: string;
    createdAt: string;
  };
  const emptyDetailInfo = {
    id: '',
    name: '',
    imgUrl: '',
  }

  const customCols: ProColumns<DetailInfo>[] = [
    {
      title: '昵称',
      dataIndex: 'nickname',
      copyable: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '用户名',
      dataIndex: 'name',
      copyable: true,
      ellipsis: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
  ]

  const schema = {
    type: 'object',
    properties: {
      name: {
        title: '用户名',
        required: true,
        type: 'string',
        maxLength: 15,
        'x-decorator': 'FormItem',
        'x-component': 'Input',
      },
      nickname: {
        title: '昵称',
        required: true,
        type: 'string',
        maxLength: 5,
        'x-decorator': 'FormItem',
        'x-component': 'Input',
      },
      password: {
        type: 'string',
        title: '密码',
        'x-decorator': 'FormItem',
        'x-component': 'Password',
        'x-component-props': {
          checkStrength: true,
        },
        'x-reactions': [
          {
            dependencies: ['.passwordConfirm'],
            fulfill: {
              state: {
                selfErrors:
                  '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
              },
            },
          },
        ]
      },
      passwordConfirm: {
        type: 'string',
        title: '确认密码',
        'x-decorator': 'FormItem',
        'x-component': 'Password',
        'x-component-props': {
          checkStrength: true,
        },
        'x-reactions': [
          {
            dependencies: ['.password'],
            fulfill: {
              state: {
                selfErrors:
                  '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
              },
            },
          },
        ]
      },
      isEnable: {
        type: 'boolean',
        title: '状态',
        required: true,
        'x-decorator': 'FormItem',
        'x-component': 'Radio.Group',
        enum: [
          {
            label: '启用',
            value: true,
          },
          {
            label: '禁用',
            value: false,
          },
        ],
      },
    },
  }

  const {deleteRequest, detailRequest, listRequest, saveRequest} = createRequest({resourceName: 'shopProduct'});

  const {showForm} = useDrawerForm({form, schema, saveRequest, detailRequest, emptyDetailInfo});

  const {TableElement, actionRef} = useProTable({
    tableTitle: '订单管理',
    customCols,
    listRequest,
    operationRender: (dom: ReactNode, record: DetailInfo, index: number, action: ProCoreActionType | undefined) => [
      <Button size='small' key='edit' onClick={() => showForm(record.id, async () => await action?.reload())}>查看</Button>,
      <Button size='small' key='del' danger={true} onClick={async () => await deleteRequest(record.id)}>删除</Button>,
    ],
    toolBarRender: () => [
      <Button
        key="button"
        icon={<PlusOutlined />}
        onClick={async () => {
          await showForm(null, async () => await actionRef.current?.reload());
        }}
        type="primary"
      >
        上架商品
      </Button>,
    ]
  });

  return (
    <TableElement/>
  )
}